<template>
  <view class="flex-col">
    <view class="container">
      <scroll-view scroll-x class="scroll-view-container">
        <uni-segmented-control :current="current" :values="items" style-type="text"
                               :active-color="activeColor" @clickItem="onClickItem"/>
      </scroll-view>
    </view>
    <view class="content">
      <view v-if="current === 0">
        <infoMessage v-model="ruleForm"/>
      </view>
      <view v-if="current === 1">
        <collectionSchedule v-model="ruleForm"/>
      </view>
      <view v-if="current === 2">
        <paymentSchedule v-model="ruleForm"/>
      </view>

    </view>
  </view>
</template>

<script>
import * as apis from '@/api/routineHandle'
import infoMessage from "./components/infoMessage.vue"
import collectionSchedule from "./components/collectionSchedule"
import paymentSchedule from "./components/paymentSchedule.vue"
export default {
  name: '',
  components: {
    infoMessage,
    collectionSchedule,
    paymentSchedule
  },
  computed: {},
  watch: {},
  data() {
    return {
      items: ['基础信息', '收款进度', '付款进度'],
      activeColor: '#007aff',
      current: 0,
      colorIndex: 0,
      ruleForm: {},
    };
  },
  onLoad(op) {
    this.handleDetails(op?.id)
  },
  methods: {
    onClickItem(e) {
      if (this.current !== e.currentIndex) {
        this.current = e.currentIndex
      }
    },

    async handleDetails(id) {
      try {
        const res = await apis?.getDisposalResult(id)
        this.ruleForm = res.data
      } catch (e) {
        console.error(e)
      }
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  background-color: #fff;
  margin: 20rpx 0 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.scroll-view-container {
  white-space: nowrap;
}
</style>


